<div id="kibi_timeline_vis_params" class="kibi-timeline-vis-params">

  <div class="form-group">
    <label>Groups</label></br>
    <ul>
      <li ng-repeat="group in vis.params.groups" class="queryOptionArea" >

        <div class="header">
          Group {{$index + 1}}
        </div>

        <div class="content">

          <input type="hidden" ng-model="group.id" />

          <div class="form-group">
            <label>Saved search id</label>
            <kibi-select-port required object-type="search" ng-model="group.savedSearchId">
            </kibi-select-port>
          </div>

          <div class="form-group">
            <label>Group label</label>
            <input required ng-model="group.groupLabel" class="form-control"/>
          </div>

          <div class="form-group">
            <label>Event label</label>
            <kibi-select-port required object-type="field" index-pattern-id="group.indexPatternId" ng-model="group.labelField">
            </kibi-select-port>
          </div>

          <div class="form-group">
            <label>Event start date</label>
            <kibi-select-port required object-type="field" index-pattern-id="group.indexPatternId" field-types="['date']" ng-model="group.startField">
            </kibi-select-port>
          </div>

          <div class="form-group">
            <label>Event end date  <span class="small_note">(Optional)</span></label>
            <kibi-select-port object-type="field" index-pattern-id="group.indexPatternId" field-types="['date']" ng-model="group.endField">
            </kibi-select-port>
          </div>

          <div class="form-group">
            <label>Events number limit <span class="small_note">(Optional, default: 100)</span></label>
            <input type="text" ng-model="group.size" class="form-control" />
          </div>

          <div class="btn-group rightCorner">
            <array-param-up-port index="{{ $index }}" model="vis.params.groups"></array-param-up-port>
            <array-param-down-port index="{{ $index }}" model="vis.params.groups"></array-param-down-port>
            <array-param-remove-port index="{{ $index }}" model="vis.params.groups"></array-param-remove-port>
          </div>

        </div>
      </li>
    </ul>
    <array-param-add-port required label="group" model="vis.params.groups"></array-param-add-port>
  </div>

  <div class="vis-editor-agg-editor-advanced-toggle">
    <a ng-click="advancedToggled = !advancedToggled || jsonError[$index].message">
      <i aria-hidden="true" class="fa fa-caret-down"
      ng-class="{'fa-caret-down': advancedToggled, 'fa-caret-left': !advancedToggled}"></i>
      Advanced
    </a>
  </div>

  <div ng-show="advancedToggled">
    <form class="form-inline">
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="vis.params.groupsOnSeparateLevels"/> Groups rendered on separate levels
        </label>
      </div>
    </form>
  </div>

</div>
